<template>
	<view class="phone-main" >
		<scroll-view class="com-top" scroll-y v-if="sel_list && sel_list.length>0"
			:style="{height:sel_list.length>5?'340rpx':(sel_list.length>0 || sel_list.length<=5)?'180rpx':'0'}">
			<!--筛选框-->
			<view class="top-box-ul">
				<block v-for="(ite,ind) in sel_list" :key="ind">
					<view v-if="ite.checked" class="top-box-li" @click="changecheck(ite.uid,ite.checked)">
						<image class="li-img" :src="ite.img  || $mAssetsPath.icon_mrtx" mode="aspectFill"></image>
						<view class="li-txt">{{ ite.nickname }}</view>
						<image class="li-icon" :src="$mAssetsPath.icon_sc3"></image>
					</view>
				</block>
			</view>
		</scroll-view>
		<view class="com-body" 	:style="{height:sel_list.length>5?'calc(100% - 340rpx)':(sel_list.length>0 || sel_list.length<=5)?'calc(100% - 180rpx)':'100%'}">
			<!--是否抄送发起人-->
			<template v-if="pageType==='flow'">
				<view class="com-flow" @click="flowcheck(checked)">
					<view class="com-flow-l">是否抄送发起人</view>
					<image class="com-flow-r" :src="checked?$mAssetsPath.icon_check_on:$mAssetsPath.icon_check"></image>
				</view>
			</template>
			<view class="phoneDirectory">
				<view class="uni-drawer" :class="is_shrink?'':'uni-drawer--left'">
					<phone-alphabet :phones="phones" :phoneListIndex="phoneListIndex" :is_shrink="is_shrink"
						:leftNavAdd="leftNavAdd" @leftAdd="leftAdd" @change="handleDatasetKey"
						@scrollAnimationOFF="handleScrollAnimationOFF" @reset="handleReset">
					</phone-alphabet>
				</view>
				<view class="uni-drawer-r" :class="is_shrink?'uni-drawer--right':'uni-drawer--r'">
					<phone-list :phones="phones" :letter="letter" :scrollAnimationOFF="scrollAnimationOFF"
						:is_checked="is_checked" @todetail="todetail" @changecheck="changecheck" @change="handlePhoneListIndex"
						@reset="handleReset" @handleClick="handleClick">
					</phone-list>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import phoneAlphabet from './phone-alphabet.vue'
	import phoneList from './phone-list.vue'
	export default {
		name: "phone-directory",
		components: {
			phoneList,
			phoneAlphabet
		},
		props: {
			pageType: {
				type: String,
				default: 'add'
			},
			phones: {
				type: Array,
				default () {
					return []
				}
			},
			is_shrink: {
				type: Boolean,
				default: false,
			},
			leftNavAdd: {
				type: Boolean,
				default: false,
			},
			sel_list: {
				type: Array,
				default () {
					return []
				}
			},
			is_checked: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				winHeight: 0,
				letter: 'A', //索引
				scrollAnimationOFF: true,
				phoneListIndex: 'A',
				reset: true,
				checked: false,
			}
		},
		computed: {
			phonesEscape() {
				return escape(JSON.stringify(this.phones))
			}
		},
		mounted() {
			let windowHeight = uni.getSystemInfoSync().windowHeight

			// #ifndef APP-PLUS
			this.winHeight = windowHeight
			//#endif

			//#ifdef APP-PLUS
			this.winHeight = windowHeight - 56
			//#endif

			if (!this.phones) {
				uni.showToast({
					title: '没有数据',
					icon: "none",
					mask: false,
					duration: 1500
				})
			}
		},
		methods: {
			flowcheck(checked){
				this.checked = !checked
				this.$emit('todetail', this.checked)
			},
			//跳转详细页
			todetail(uid) {
				this.$emit('todetail', uid)
			},
			//增加左侧导航
			leftAdd() {
				this.$emit('leftAdd')
			},
			//右侧列表选中
			changecheck(uid, checked) {
				this.$emit('changecheck', uid, checked)
			},
			handleClick(e) {
				this.$emit('paramClick', e)
			},
			handleDatasetKey(val) {
				console.log(22, val)
				this.letter = val
			},
			handleScrollAnimationOFF(val) {
				console.log(77, val)
				this.scrollAnimationOFF = val
			},
			//列表index
			handlePhoneListIndex(val) {
				console.log(66, val)
				if (this.reset) {
					this.phoneListIndex = val
				}
			},
			//重置
			handleReset(val) {
				console.log(88, val)
				if (val) {
					this.letter = ''
				}
				this.reset = val
			}

		}
	}
</script>

<style lang="scss">
	// 抽屉宽度
	$drawer-width: 250rpx;
	.uni-drawer {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		position: absolute;
		z-index: 99999;
		top: 0;
		width: $drawer-width;
		bottom: 0;
		background-color: $uni-bg-color;
		transition: transform 0.3s ease;
		flex: 1;
	}
	.uni-drawer-r {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		position: absolute;
		z-index: 99999;
		top: 0;
		width: calc(100%);
		bottom: 0;
		background-color: $uni-bg-color;
		transition: transform 0.3s ease;
		flex: 1;
	}
	
	.uni-drawer--left {
		left: 0;
		/* #ifdef APP-NVUE */
		transform: translateX(-$drawer-width);
		/* #endif */
		/* #ifndef APP-NVUE */
		transform: translateX(-$drawer-width);
		/* #endif */
	}
	.uni-drawer--r {
		left: 0;
		/* #ifdef APP-NVUE */
		transform: translateX(0);
		/* #endif */
		/* #ifndef APP-NVUE */
		transform: translateX(0);
		/* #endif */
	}
	.uni-drawer--right {
		left: 0;
		/* #ifdef APP-NVUE */
		transform: translateX($drawer-width);
		/* #endif */
		/* #ifndef APP-NVUE */
		transform: translateX($drawer-width);
		/* #endif */
	}
	
	.com-flow {
		width: 100%;
		height: 84rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		background: $uni-bg-color;
		.com-flow-l {
			font-size: 32rpx;
			font-weight: 400;
			line-height: 84rpx;
			color: $font-color-3;
		}
		.com-flow-r {
			width: 36rpx;
			height: 36rpx
		}
	}
	
	.com-top {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		background: $uni-bg-color;
		border-bottom: 1rpx solid #eee;
		overflow: hidden;
		padding-top: 10rpx;
	
		.top-box-ul {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			padding: 0 30rpx;
	
			.top-box-li {
				display: flex;
				position: relative;
				flex-direction: column;
				width: 116rpx;
				margin: 0 20rpx 10rpx 0;
	
				.li-icon {
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					right: 0;
					top: 0;
				}
	
				.li-img {
					width: 80rpx;
					height: 80rpx;
					margin-top: 30rpx;
					margin-bottom: 4rpx;
					border-radius: 10rpx;
				}
	
				.li-txt {
					font-size: 24rpx;
					font-weight: 400;
					color: $font-color-3;
				}
			}
	
			.top-box-li:nth-of-type(5n) {
				margin: 0 0 10rpx 0;
			}
		}
	}
	
	.phone-main {
		display: flex;
		flex-direction: column;
		height: 100%;
		overflow: hidden;
		.com-body{
			width: 100%;
		}
	}
	
	.phoneDirectory {
		display: flex;
		flex-direction: row;
		position: relative;
	}
	
	.phone-main-search {
		background-color: #fff;
		padding: 10upx 20upx;
		border-bottom: 1px solid #e5e5e5;
	}
	
	.phone-main-input {
		font-size: 28upx;
		border: 1px solid #e5e5e5;
		border-radius: 3px;
		padding: 10upx 20upx 10upx 20upx;
	}
</style>
